<template>
  <div style="display: flex; height: 100vh; width: 100%;">


    <!-- 侧边栏 -->
    <div
        :style="{ width: isCollapse ? '64px' : '208px', transition: 'width 0.3s'}"
        style="position: fixed; left: 0; top: 0; bottom: 0; z-index: 1; background-color: #fff;"
    >
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :style="{ width: (isCollapse ? '64px' : '208px') }"
        style="height: 100vh"
        router
        @open="handleOpen"
        @close="handleClose"
      >
        <el-row style="padding-top: 10px">
          <el-col :span="2">
          </el-col>
          <el-col :span="7" style=" padding-left: 7px">
            <!--            将方的图片  裁剪成圆的-->
            <el-avatar :src="require('@/assets/imgs/admin/R-C.jpg')" style="width: 40px;height: 40px;"/>
          </el-col>
          <el-col :span="isCollapse ? 0 : 13">
            <span style="color: #181818;font-weight: bold;position:relative;top: 8px;left: 2px">智慧医疗云平台</span>
          </el-col>
        </el-row>

        <el-menu-item v-for="item in MenuList" :key="item.index" :index="item.index" :icon="item.icon">
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.title}}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 主体部分 -->
    <div
        :style="{ marginLeft: isCollapse ? '64px' : '208px', transition: 'margin-left 0.3s', width: '100%', overflow: 'hidden' }"
        style="position: fixed; left: 0px;height: 100vh"
    >
      <el-header style="position: fixed; top: 0; width: 100%; height: 60px; background-color: #fff; display: flex; align-items: center; z-index: 2;">

        <el-row :gutter="10" style="flex: 1;">
          <el-col :span="18">
            <el-icon style="font-size: 20px" @click="isCollapse = !isCollapse">
              <Expand v-if="isCollapse"/>
              <Fold v-if="!isCollapse"/>
            </el-icon>
          </el-col>

          <el-col :span="6" style="position: relative;">
            <el-dropdown trigger="click" style="position: absolute;">
                <span style="font-size: 19px; font-weight: bold;">
                  {{username}}
                  <el-icon>
                    <arrow-down/>
                  </el-icon>
                </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>


      </el-header>
      <el-main style="height: 100vh; padding: 0;overflow-y:auto">
        <RouterView/>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {
  Document,
  Menu as IconMenu,
  Avatar,
  Fold,
  Expand,
  Setting,
} from "@element-plus/icons-vue";
// import { useRoute } from 'vue-router'
// 检测路由变化 更新 面包屑导航
// const route = useRoute()
const MenuList = ref([
  {
    index: "/doctor",
    icon: IconMenu,
    title: "医生模块",
  },
  {
    index: "/patient",
    icon: Avatar,
    title: "患者模块",
  },
  {
    index: "/reservation",
    icon: Document,
    title: "预约管理",
  },
  {
    index: "/drug",
    icon: Document,
    title: "药物管理",
  },
  {
    index: "/hospital",
    icon: Setting,
    title: "医院管理",
  },
  {
    index: "/subject",
    icon: Setting,
    title: "科目管理",
  },
]);

const username = ref('')


// 侧边栏 开关
const isCollapse = ref(false);
// 侧边栏 点击事件   开启
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);

};
// 侧边栏 点击事件    关闭
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

// 退出登录
const logout =() =>{
  console.log("退出登录")
}

onMounted(() => {
  username.value = localStorage.getItem('username')
})

</script>




<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 208px;
  min-height: 400px;
}

.el-menu-vertical-demo {
  transition: width 0.3s;
  border-right: none;
}

.el-header {
  padding: 0 20px;
}

.el-main {
  padding: 20px;
}
</style>
